<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

 <div class="card">
     <div class="card-header">
         <i class="fa fa-tags mr-2 text-danger"></i>
         <span class="font-weight-bold">
            <span class="mr-2 text-info">{{appServiceKey}}</span>
            <span>Configurable Setting</span>
         </span>
         <button class="btn btn-success btn-sm float-right" (click)="submit()"><i class="fa fa-save"></i> Submit</button>
     </div>
     <div class="card-body">

        <div class="card">
            <div class="card-header">
              <ul class="nav nav-tabs card-header-tabs font-weight-bold">
                <li class="nav-item" (click)="configurableSectionChange('Trigger')">
                    <a class="nav-link" role="button" [class.active]="configurableSection === 'Trigger'">Trigger</a>
                  </li>
                <li class="nav-item" (click)="configurableSectionChange('PipelineFunc')">
                  <a class="nav-link" role="button" [class.active]="configurableSection === 'PipelineFunc'">Pipeline Functions</a>
                </li>
                <li class="nav-item" (click)="configurableSectionChange('InsecureSecrets')">
                  <a class="nav-link" role="button" [class.active]="configurableSection === 'InsecureSecrets'">Insecure Secrets</a>
                </li>
                <li class="nav-item" (click)="configurableSectionChange('StoreAndForward')">
                  <a class="nav-link" role="button" [class.active]="configurableSection === 'StoreAndForward'">Store And Forward</a>
                </li>
              </ul>
            </div>
            <div class="card-body">

                <div *ngIf="configurableSection === 'Trigger'">
                    <app-appsvc-trigger [(configTrigger)]="configTrigger"></app-appsvc-trigger>
                </div>

                <div *ngIf="configurableSection === 'PipelineFunc'">
                    <app-pipeline-function 
                    [(selectedFunctionsName)]="selectedFunctionsName"
                    [(availableFunctions)]="availableFunctions"></app-pipeline-function>
                </div>

                <div *ngIf="configurableSection === 'InsecureSecrets'">
                    <app-appsvc-insecure-secrets [(insecureSecrets)]="insecureSecrets"></app-appsvc-insecure-secrets>
                </div>

                <div *ngIf="configurableSection === 'StoreAndForward'">
                    <form>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">
                                <span>Enabled</span>
                                <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="false" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
                                data-content="capability allows for export functions to persist data on failure and for the export of the data to be retried at a later time."></span>
                            </label>
                            <div class="col-sm-10">
                                <select class="custom-select"  name="FilterOut" [(ngModel)]="configWritable.StoreAndForward.Enabled">
                                    <option value="false">false</option>
                                    <option value="true">true</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">
                                <span>MaxRetryCount</span>
                                <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
                                data-content='pure number'></span>
                            </label>
                            <div class="col-sm-10">
                                  <input type="text" class="form-control" name="MaxRetryCount" [(ngModel)]="configWritable.StoreAndForward.MaxRetryCount">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">
                                <span>RetryInterval</span>
                                <span class="fa fa-question-circle-o fa-lg ml-2" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
                                data-content='
                                The format of this field is to be an unsigned integer followed by a unit,&lt;br&gt;
                                which may be "ns", "us" (or "µs"), "ms", "s", "m", "h" representing nanoseconds, microseconds, milliseconds, seconds, minutes or hours. Eg, "100ms", "24h"'></span>
                            </label>
                            <div class="col-sm-10">
                                  <input type="text" class="form-control" name="RetryInterval" [(ngModel)]="configWritable.StoreAndForward.RetryInterval">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
          </div>
     </div>
 </div>


